<template>
	<view class="content">
		<!--  搜索栏 -->
		<view class="search__box">
			<yg-searchbar @searchClick="searchBarClickAction" @tap="searchClick"></yg-searchbar>
		</view>
		<!-- Banner轮播器 -->
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular
			:style="{ paddingTop : 100 + 'rpx'  }">
			<swiper-item v-for="(item,index) in  bannerlist" :key="item.goods_id">
				<image class="swiper__image" :src="item.image_src" mode="scaleToFill"></image>
			</swiper-item>
		</swiper>
		<!--  功能导航 -->
		<view class="functions">
			<view class="functions__items" v-for="(item,index) in functionlist" :key="item.name">
				<image class="items__icon" :src="item.image_src" mode=""></image>
			</view>
		</view>
		<!-- 分类列表 -->
		<view class="floor" v-for="(item,index) in floorlist">
			<!-- 标题 -->
			<view class="floor__title"> {{item.floor_title.name}} </view>
			<!-- 列表展示 -->
			<view class="floor__list">
				<!-- 竖向展示 -->
				<view class="list_shu">
					<image class="shu__image" :src="item.product_list[0].image_src" mode="scaleToFill"></image>
				</view>
				<!-- 横向展示 -->
				<view class="list_heng">
					<!-- 四个列表 -->
					<view class="heng__item" v-for="(itm,idx) in getHengArray(index)">
						<image class="heng__image" :src="itm.image_src" mode="scaleToFill"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/*
	 知识点:
	 1. 组件的创建和使用,以及 easycom 的设置
	 2. 轮播器设置只需要注意两点: 
	    对外面的 Swiper 设置高度来控制轮播器的高度
			在其内部的 swiper-item 的宽高系统都自动设置为了 100%, 不用我们管, 我们要手动设置的是 image 控件的宽高,否则只会显示原图片宽高;      
	
	*/



	export default {
		data() {
			return {
				bannerlist: [1, 2, 3], // 轮播数据
				functionlist: [1, 2, 3], // 功能数据
				floorlist: [], // 数据列表
			}
		},
		onLoad() {
			this.getBannerData()
			this.getfunctionData()
			this.getfloordata()
		},

		// 计算属性
		computed: {


		},

		methods: {

			// 搜索栏点击事件
			searchClick() {
				uni.navigateTo({
					url: '/pages/search/search',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			//  获取轮播数据
			getBannerData() {
				this.$reqGet('/api/public/v1/home/swiperdata').then(res => {
					const code = res.statusCode;
					if (code == 200) {
						const data = res.data;
						this.bannerlist = data.message;
					}
				}, error => {
					console.log('-- 失败了');
				});
			},

			// 获取功能数据
			getfunctionData() {
				this.$reqGet('/api/public/v1/home/catitems').then(res => {
					const code = res.statusCode;
					if (code == 200) {
						const data = res.data;
						this.functionlist = data.message;
					}
				}, error => {
					console.log('-- 失败了');
				});
			},

			// 数据列表
			getfloordata() {
				this.$reqGet('/api/public/v1/home/floordata').then(res => {
					const code = res.statusCode;
					if (code == 200) {
						const data = res.data;
						this.floorlist = data.message;
					}
				}, error => {
					console.log('-- 失败了');
				});
			},


			// 动态获取后 4 个元素
			getHengArray(index) {
				let array = [...this.floorlist[index].product_list || []]
				//删除元素
				array.splice(0, 1)
				return array
			},

			// 搜索点击事件
			searchBarClickAction() {
				// console.log('--  老乡崩泪相告,他爸收到了您点击搜索栏的事件');
				uni.navigateTo({
					url: '/pages/search/search'
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-color-background;
	}

	.content {
		/* 	display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; */
	}

	.search__box {
		//  固定到上方就好了
		position: fixed;
		left: 0;
		right: 0;
		z-index: 999;
	}


	.swiper {
		width: 100%;
		height: 320rpx;
	}

	.swiper__image {
		width: 100%;
		height: 100%;
	}

	.functions {
		padding: 20rpx 0 0;
		display: flex;
		flex-wrap: wrap;
		// background-color: orange;
	}

	.functions__items {
		padding: 15rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		display: flex;
		flex-wrap: nowrap;
		width: calc((100% - 15px)/4);
		margin: 0 5px 5px 0;
	}

	.functions__items:nth-child(4n) {
		margin-right: 0;
	}

	.items__icon {
		width: 110rpx;
		height: 110rpx;
	}

	.floor {
		padding: 10rpx 10rpx;
		display: flex;
		flex-direction: column;
	}

	.floor__title {
		padding: 15rpx 0;
		// background-color: olive;
	}

	.floor__list {
		display: flex;
		flex-direction: row;
		// background-color: orange;
	}

	.list_shu {
		flex: 1;
		border-radius: 10rpx;
		// background-color: olivedrab;
	}

	.shu__image {
		width: 100%;
		height: 100%;
	}

	.list_heng {
		margin: 0 5px;
		flex: 2;
		// background-color: coral;

		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.heng__image {
		width: 100%;
		height: 100%;
	}

	.heng__item {
		height: 180rpx;
		width: calc((100% - 5px)/2);
		margin: 0 5px 5px 0;
		//background: yellow;
		border-radius: 10rpx;
	}

	.heng__item:nth-child(2n) {
		margin-right: 0;
	}

	.heng__item:nth-child(3n) {
		margin-bottom: 0;
	}

	.heng__item:nth-child(4n) {
		margin-bottom: 0;
	}
</style>